<!-- 
    确认需求：
    1.点击哪一个按钮，其他按钮全部回归原始，当前高亮
    2.点击哪一个按钮，其他盒子全部隐藏，当前索引对应盒子显示
    布局结构：
    1.三个表示按钮的盒子，横向排列，初始一个高亮
    2.三个显示内容的盒子，在同一位置不同层级排列，初始一个显示
    代码逻辑：
    1.每一个按钮盒子绑定一个点击事件
    2.点击任何一个按钮盒子时
        -所有按钮盒子取消高亮状态
        -所有内容盒子隐藏
    3.点击任何一个按钮盒子时
        -当前按钮盒子高亮
        -当前索引对应内容盒子显示
 -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        ul, ol, li{
            list-style: none;
        }
        .box{
            width: 600px;
            height: 400px;
            border: 3px solid black;
            margin: 60px auto;
            display: flex;
            flex-direction: column;
        }
        .box>ul{
            height: 60px;
            display: flex;
        }
        .box>ul>li{
            flex: 1;
            color: #fff;
            background-color: royalblue;
            font-size: 30px;
            display: flex;
            justify-content: center;
            align-items: center;
            cursor: pointer;
            /* style="cursor:pointer"   手型鼠标；cursor:hand 与 cursor:pointer 的效果是一样，都像手形光标 */
        }
        .box>ul>li.active{
            background-color: rgb(235, 98, 0);
        }
        .box>ol{
            flex: 1;
            position: relative;
        }
        .box>ol>li{
            width: 100%;
            height: 100%;
            background-color: purple;
            display: flex;
            justify-content: center;
            align-items: center;
            color: #fff;
            font-size: 100px;
            position: absolute;
            left: 0;
            top: 0;
            display: none;
        }
        .box>ol>li.active{
            display: flex;
        }
    </style>
</head>
<body>
    <div class="box">
        <ul>
            <li class="active">1</li>
            <li>2</li>
            <li>3</li>
        </ul>
        <ol>
            <li class="active">1</li>
            <li>2</li>
            <li>3</li>
        </ol>
    </div>

    <script>
        // 1.获取元素
        var btns = document.querySelectorAll('ul>li')
        var tabs = document.querySelectorAll('ol>li')

        // 2.给 btns 里面所有按钮添加点击事件
        btns.forEach(function(item, index){
            item.onclick = function(){

                // 2-2.给btns 和 tabs 里面的所有内容取消 active 类名
                btns.forEach(function(t,i){
                    t.className = ''
                    tabs[i].className = ''
                })

                // 2-3.当前点击的按钮和索引对应的盒子添加active类名
                item.className = 'active'
                tabs[index].className = 'active'
            }
        })
    </script>
</body>
</html>